<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

//鼠标放置上去出现一个按钮，鼠标移开按钮消失
const show = ref(false)
const showButton = () => {
  show.value = true
}
const hideButton = () => {
  show.value = false
}
const show1 = ref(false)
const showButton1 = () => {
  show1.value = true
}
const hideButton1 = () => {
  show1.value = false
}
const show2 = ref(false)
const showButton2 = () => {
  show2.value = true
}
const hideButton2 = () => {
  show2.value = false
}
//跳转到
const router = useRouter()
const handCilck = () => {
  router.push('/Train/Detail')
}
</script>
<template>
  <div id="my-introduce">
    <el-container>
      <el-header class="my-header">
        <div
          style="
            background-color: #f5f9ff;
            height: 3.8125rem;
            width: 85.75rem;
            border-radius: 0.5rem;
          "
        >
          <svg
            t="1718085189667"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6433"
            width="20"
            height="20"
            style="margin-top: 1.25rem; margin-left: 1.875rem"
          >
            <path
              d="M511.333034 607.018226a92.900505 92.900505 0 0 1-45.891732-14.614608L26.118726 361.17631l-3.723467-3.816554a77.122313 77.122313 0 0 1 0-108.585609l3.723467-3.770011L465.348215 13.963002A95.879278 95.879278 0 0 1 512.217358 0c15.964365 0.55852 31.50984 5.352484 44.960865 13.963002l439.36912 231.134221 3.723467 3.956184c29.787737 30.020454 29.787737 78.565156 0 108.585609l-3.723467 3.723468-439.136403 231.041134c-13.776828 8.843234-29.69465 13.916458-46.077906 14.614608z m-2.746057-536.318894a63.298941 63.298941 0 0 0-9.774101 4.793964L65.820194 303.32294l432.992682 227.783101h0.27926c3.49075 1.95482 6.329894 3.444207 8.377801 4.375073l3.863097 1.629017 3.723467-1.722103a105.653379 105.653379 0 0 0 8.284715-4.281987l1.303213-0.744694 432.247989-227.317667-432.992682-227.876188h-0.41889a74.795146 74.795146 0 0 0-8.005455-4.1889L511.984641 69.489205l-3.397664 1.210127z m2.932231 744.134903a92.155811 92.155811 0 0 1-45.845189-14.661152L19.369942 566.339348a35.047134 35.047134 0 0 1 16.290168-65.905368c5.492114 0 10.937685 1.349757 15.824736 3.909641l447.281487 234.438798h0.372347c2.746057 1.67556 5.585201 3.164947 8.517431 4.468161l3.816553 1.629016 3.723467-1.67556c1.67556-0.744693 4.281987-2.047907 8.284715-4.281987l1.349757-0.791237 295.364029-155.175492a34.814418 34.814418 0 0 1 48.730875 22.71315 35.000591 35.000591 0 0 1-16.848688 39.329121l-294.619336 154.849689a92.341984 92.341984 0 0 1-46.124449 14.986955h0.186174z m0 209.119222a92.155811 92.155811 0 0 1-45.845189-14.614609L19.369942 775.412027a35.047134 35.047134 0 0 1 16.290168-65.858825c5.492114 0 10.937685 1.303213 15.824736 3.863097l447.281487 234.252625h0.372347c2.746057 1.629017 5.585201 3.118404 8.517431 4.421617l3.816553 1.629017 3.723467-1.722103c2.839144-1.25667 5.585201-2.699514 8.284715-4.281988l1.349757-0.744693 447.840007-235.323122a34.535157 34.535157 0 0 1 46.869142 14.847326 35.140221 35.140221 0 0 1-14.754238 47.148402l-447.281487 235.043861a92.807418 92.807418 0 0 1-46.170993 15.219672h0.186174z m469.948093-447.467661a42.819872 42.819872 0 0 1-39.794555-26.34353 43.192219 43.192219 0 0 1 9.075951-47.008772 42.680242 42.680242 0 0 1 46.682969-9.494841 43.006045 43.006045 0 0 1-16.150538 82.847143h0.186173z"
              fill="#bfbfbf"
              p-id="6434"
            ></path>
          </svg>
          <span style="margin-left: 0.9375rem">9个实验</span>
        </div></el-header
      >
      <el-main>
        <div>
          <span style="margin-left: 70.5rem; font-size: 1.4rem">共9个章节</span>
        </div>
        <div class="my-card" @mouseover="showButton" @mouseleave="hideButton">
          <svg
            t="1718108777636"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="8651"
            width="20"
            height="20"
            style="margin-top: 1.25rem; margin-left: 1.25rem; color: #6eb6f9"
          >
            <path
              d="M511.333034 607.018226a92.900505 92.900505 0 0 1-45.891732-14.614608L26.118726 361.17631l-3.723467-3.816554a77.122313 77.122313 0 0 1 0-108.585609l3.723467-3.770011L465.348215 13.963002A95.879278 95.879278 0 0 1 512.217358 0c15.964365 0.55852 31.50984 5.352484 44.960865 13.963002l439.36912 231.134221 3.723467 3.956184c29.787737 30.020454 29.787737 78.565156 0 108.585609l-3.723467 3.723468-439.136403 231.041134c-13.776828 8.843234-29.69465 13.916458-46.077906 14.614608z m-2.746057-536.318894a63.298941 63.298941 0 0 0-9.774101 4.793964L65.820194 303.32294l432.992682 227.783101h0.27926c3.49075 1.95482 6.329894 3.444207 8.377801 4.375073l3.863097 1.629017 3.723467-1.722103a105.653379 105.653379 0 0 0 8.284715-4.281987l1.303213-0.744694 432.247989-227.317667-432.992682-227.876188h-0.41889a74.795146 74.795146 0 0 0-8.005455-4.1889L511.984641 69.489205l-3.397664 1.210127z m2.932231 744.134903a92.155811 92.155811 0 0 1-45.845189-14.661152L19.369942 566.339348a35.047134 35.047134 0 0 1 16.290168-65.905368c5.492114 0 10.937685 1.349757 15.824736 3.909641l447.281487 234.438798h0.372347c2.746057 1.67556 5.585201 3.164947 8.517431 4.468161l3.816553 1.629016 3.723467-1.67556c1.67556-0.744693 4.281987-2.047907 8.284715-4.281987l1.349757-0.791237 295.364029-155.175492a34.814418 34.814418 0 0 1 48.730875 22.71315 35.000591 35.000591 0 0 1-16.848688 39.329121l-294.619336 154.849689a92.341984 92.341984 0 0 1-46.124449 14.986955h0.186174z m0 209.119222a92.155811 92.155811 0 0 1-45.845189-14.614609L19.369942 775.412027a35.047134 35.047134 0 0 1 16.290168-65.858825c5.492114 0 10.937685 1.303213 15.824736 3.863097l447.281487 234.252625h0.372347c2.746057 1.629017 5.585201 3.118404 8.517431 4.421617l3.816553 1.629017 3.723467-1.722103c2.839144-1.25667 5.585201-2.699514 8.284715-4.281988l1.349757-0.744693 447.840007-235.323122a34.535157 34.535157 0 0 1 46.869142 14.847326 35.140221 35.140221 0 0 1-14.754238 47.148402l-447.281487 235.043861a92.807418 92.807418 0 0 1-46.170993 15.219672h0.186174z m469.948093-447.467661a42.819872 42.819872 0 0 1-39.794555-26.34353 43.192219 43.192219 0 0 1 9.075951-47.008772 42.680242 42.680242 0 0 1 46.682969-9.494841 43.006045 43.006045 0 0 1-16.150538 82.847143h0.186173z"
              fill="#707070"
              p-id="8652"
            ></path>
          </svg>
          <span class="my-text" style="margin-left: 0.9375rem; font-size: 1.25rem; font-weight: 600"
            >实验连接数据库</span
          >
          <p style="color: #a7a7a7; margin-left: 0.9995rem; font-size: 0.875rem">
            知识点:1.数据库概述 2数据库优点 3.数据库连接
          </p>
          <el-button
            type="primary"
            round
            style="margin-left: 61.5rem; margin-top: -6rem"
            v-show="show"
            @click="handCilck"
            >开始学习</el-button
          >
        </div>
        <div class="my-card" @mouseover="showButton1" @mouseleave="hideButton1">
          <svg
            t="1718108777636"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="8651"
            width="20"
            height="20"
            style="margin-top: 1.25rem; margin-left: 1.25rem; color: #6eb6f9"
          >
            <path
              d="M511.333034 607.018226a92.900505 92.900505 0 0 1-45.891732-14.614608L26.118726 361.17631l-3.723467-3.816554a77.122313 77.122313 0 0 1 0-108.585609l3.723467-3.770011L465.348215 13.963002A95.879278 95.879278 0 0 1 512.217358 0c15.964365 0.55852 31.50984 5.352484 44.960865 13.963002l439.36912 231.134221 3.723467 3.956184c29.787737 30.020454 29.787737 78.565156 0 108.585609l-3.723467 3.723468-439.136403 231.041134c-13.776828 8.843234-29.69465 13.916458-46.077906 14.614608z m-2.746057-536.318894a63.298941 63.298941 0 0 0-9.774101 4.793964L65.820194 303.32294l432.992682 227.783101h0.27926c3.49075 1.95482 6.329894 3.444207 8.377801 4.375073l3.863097 1.629017 3.723467-1.722103a105.653379 105.653379 0 0 0 8.284715-4.281987l1.303213-0.744694 432.247989-227.317667-432.992682-227.876188h-0.41889a74.795146 74.795146 0 0 0-8.005455-4.1889L511.984641 69.489205l-3.397664 1.210127z m2.932231 744.134903a92.155811 92.155811 0 0 1-45.845189-14.661152L19.369942 566.339348a35.047134 35.047134 0 0 1 16.290168-65.905368c5.492114 0 10.937685 1.349757 15.824736 3.909641l447.281487 234.438798h0.372347c2.746057 1.67556 5.585201 3.164947 8.517431 4.468161l3.816553 1.629016 3.723467-1.67556c1.67556-0.744693 4.281987-2.047907 8.284715-4.281987l1.349757-0.791237 295.364029-155.175492a34.814418 34.814418 0 0 1 48.730875 22.71315 35.000591 35.000591 0 0 1-16.848688 39.329121l-294.619336 154.849689a92.341984 92.341984 0 0 1-46.124449 14.986955h0.186174z m0 209.119222a92.155811 92.155811 0 0 1-45.845189-14.614609L19.369942 775.412027a35.047134 35.047134 0 0 1 16.290168-65.858825c5.492114 0 10.937685 1.303213 15.824736 3.863097l447.281487 234.252625h0.372347c2.746057 1.629017 5.585201 3.118404 8.517431 4.421617l3.816553 1.629017 3.723467-1.722103c2.839144-1.25667 5.585201-2.699514 8.284715-4.281988l1.349757-0.744693 447.840007-235.323122a34.535157 34.535157 0 0 1 46.869142 14.847326 35.140221 35.140221 0 0 1-14.754238 47.148402l-447.281487 235.043861a92.807418 92.807418 0 0 1-46.170993 15.219672h0.186174z m469.948093-447.467661a42.819872 42.819872 0 0 1-39.794555-26.34353 43.192219 43.192219 0 0 1 9.075951-47.008772 42.680242 42.680242 0 0 1 46.682969-9.494841 43.006045 43.006045 0 0 1-16.150538 82.847143h0.186173z"
              fill="#707070"
              p-id="8652"
            ></path>
          </svg>
          <span class="my-text" style="margin-left: 0.9375rem; font-size: 1.25rem; font-weight: 600"
            >创建数据库并插入数据</span
          >
          <p style="color: #a7a7a7; margin-left: 0.9995rem; font-size: 0.875rem">
            知识点:1.基本数据类型 2.插入数据
          </p>
          <el-button
            type="primary"
            round
            style="margin-left: 61.5rem; margin-top: -6rem"
            v-show="show1"
            @click="handCilck"
            >开始学习</el-button
          >
        </div>
        <div class="my-card" @mouseover="showButton2" @mouseleave="hideButton2">
          <svg
            t="1718108777636"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="8651"
            width="20"
            height="20"
            style="margin-top: 1.25rem; margin-left: 1.25rem; color: #6eb6f9"
          >
            <path
              d="M511.333034 607.018226a92.900505 92.900505 0 0 1-45.891732-14.614608L26.118726 361.17631l-3.723467-3.816554a77.122313 77.122313 0 0 1 0-108.585609l3.723467-3.770011L465.348215 13.963002A95.879278 95.879278 0 0 1 512.217358 0c15.964365 0.55852 31.50984 5.352484 44.960865 13.963002l439.36912 231.134221 3.723467 3.956184c29.787737 30.020454 29.787737 78.565156 0 108.585609l-3.723467 3.723468-439.136403 231.041134c-13.776828 8.843234-29.69465 13.916458-46.077906 14.614608z m-2.746057-536.318894a63.298941 63.298941 0 0 0-9.774101 4.793964L65.820194 303.32294l432.992682 227.783101h0.27926c3.49075 1.95482 6.329894 3.444207 8.377801 4.375073l3.863097 1.629017 3.723467-1.722103a105.653379 105.653379 0 0 0 8.284715-4.281987l1.303213-0.744694 432.247989-227.317667-432.992682-227.876188h-0.41889a74.795146 74.795146 0 0 0-8.005455-4.1889L511.984641 69.489205l-3.397664 1.210127z m2.932231 744.134903a92.155811 92.155811 0 0 1-45.845189-14.661152L19.369942 566.339348a35.047134 35.047134 0 0 1 16.290168-65.905368c5.492114 0 10.937685 1.349757 15.824736 3.909641l447.281487 234.438798h0.372347c2.746057 1.67556 5.585201 3.164947 8.517431 4.468161l3.816553 1.629016 3.723467-1.67556c1.67556-0.744693 4.281987-2.047907 8.284715-4.281987l1.349757-0.791237 295.364029-155.175492a34.814418 34.814418 0 0 1 48.730875 22.71315 35.000591 35.000591 0 0 1-16.848688 39.329121l-294.619336 154.849689a92.341984 92.341984 0 0 1-46.124449 14.986955h0.186174z m0 209.119222a92.155811 92.155811 0 0 1-45.845189-14.614609L19.369942 775.412027a35.047134 35.047134 0 0 1 16.290168-65.858825c5.492114 0 10.937685 1.303213 15.824736 3.863097l447.281487 234.252625h0.372347c2.746057 1.629017 5.585201 3.118404 8.517431 4.421617l3.816553 1.629017 3.723467-1.722103c2.839144-1.25667 5.585201-2.699514 8.284715-4.281988l1.349757-0.744693 447.840007-235.323122a34.535157 34.535157 0 0 1 46.869142 14.847326 35.140221 35.140221 0 0 1-14.754238 47.148402l-447.281487 235.043861a92.807418 92.807418 0 0 1-46.170993 15.219672h0.186174z m469.948093-447.467661a42.819872 42.819872 0 0 1-39.794555-26.34353 43.192219 43.192219 0 0 1 9.075951-47.008772 42.680242 42.680242 0 0 1 46.682969-9.494841 43.006045 43.006045 0 0 1-16.150538 82.847143h0.186173z"
              fill="#707070"
              p-id="8652"
            ></path>
          </svg>
          <span class="my-text" style="margin-left: 0.9375rem; font-size: 1.25rem; font-weight: 600"
            >数据库的增删改查</span
          >
          <p style="color: #a7a7a7; margin-left: 0.9995rem; font-size: 0.875rem">
            知识点:1.数据库的操作 2.数据表的操作 3.更新和删除数据
          </p>
          <el-button
            type="primary"
            round
            style="margin-left: 61.5rem; margin-top: -6rem"
            v-show="show2"
            @click="handCilck"
            >开始学习</el-button
          >
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<style lang="scss" scoped>
.my-card:hover {
  background-color: #f8f9fb;
  cursor: pointer;
  .my-text {
    color: #198cf7;
  }
  .icon {
    color: #6eb6f9;
  }
}
.my-card {
  margin-top: 2.5rem;
  width: 78.75rem;
  height: 6.25rem;
}
.my-introduce {
  height: 100vw;
  background-color: #f1f1f1;
}
</style>
